<template>
    <div class="classCon" :style="{width:winWidth+'px'}">
        <ul :style="{width:winWidth+'px'}">
            <li v-for="item in list" :key="item" :style="{width:(winWidth/4)-10+'px'}">
                <img :src="item.url" mode="aspectFit" :style="{width:(winWidth/4)-10+'px',height:(winWidth-10)/4+'px'}" alt="">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "component_name",
        data() {
            return {
                winWidth: "",
                list: [{
                        name: '手机',
                        url: '/static/image/class.jpg'
                    },
                    {
                        name: '手机',
                        url: '/static/image/class.jpg'
                    },
                    {
                        name: '手机',
                        url: '/static/image/class.jpg'
                    },
                    {
                        name: '手机',
                        url: '/static/image/class.jpg'
                    },
                    {
                        name: '手机',
                        url: '/static/image/class.jpg'
                    },
                     {
                        name: '手机',
                        url: '/static/image/class.jpg'
                    }
                ]
            };
        },
        created: function() {
            wx.getStorageSync('userSystem')
            this.winWidth = wx.getStorageSync('userSystem').windowWidth
        }
    }
</script>

<style lang="css" scoped>
    
</style>